/* ------------------------------------------------------------------------------------------- */					
body, html {				/* Estilos generales para el cuerpo y el html */
    margin-top: 0px;  			/* Margen superior */
    margin-botton: 0px; 		/* Margen inferior */
    padding: 0;  			/* Elimina el relleno por defecto del navegador */
    font-family: times new roman, times, Free-sans-serif;  	
					/* Establece la fuente predeterminada para el documento */
    background-color: #CCB666; 		/* Fondo exterior color oro */
a:link {
text-decoration:none;
color: #000000;
}
a:visited {
text-decoration:none;
color: #000000;
}
a:hover {
text-decoration:underline;
color: #ff1800;
}
}					

/* ------------------------------------------------------------------------------------------- */
				
.content-wrapper {			/* Estilos para el contenedor principal de contenido */
    background-color: #FFF9EE; 		/* Fondo interior color rosa claro */
    margin-left: 30px;  		/* Margen izquierdo */
    margin-right: 30px; 		/* Margen derecho */
    border-radius: 30px; 		/* Esquinas redondeadas */
    padding: 20px; 			/* Espaciado interior */
}					

/* ------------------------------------------------------------------------------------------- */					
.header-outer {				/* Estilos para la cabecera exterior */
    background: linear-gradient(160deg, #708090, #404040);  
					/* Crea un degradado como fondo de la cabecera */
    margin-left: 60px;  		/* Margen izquierdo */
    margin-right: 60px; 		/* Margen derecho */
    margin-top: 60px; 			/* Margen superior para la cabecera */
    padding: 60px; 			/* Espaciado para simular un borde */
    box-shadow: 0 0 0 30px #FFF9EE; 	/* Simula un borde con sombra */
    border-radius: 15px;  		/* Redondea las esquinas de la cabecera */
    overflow: hidden;  			/* Evita que el contenido se desborde del contenedor */
    text-align: center;  		/* Centra el texto dentro de la cabecera */
    color: white;  			/* Establece el color del texto dentro de la cabecera */
    padding: 40px 0;  			/* Añade un relleno vertical para la cabecera */
}			
/* ------------------------------------------------------------------------------------------- */					
.header-container h1 {			/* Estilos para el contenedor del título en la cabecera */
    margin: 0;  			/* Elimina el margen por defecto del elemento h1 */
    font-size: 60px;  			/* Establece el tamaño de la fuente del título principal */
    color: #E0E0E0;  			/* Establece el color de la fuente del título principal */
    font-family: Arial, sans-serif;  	/* Establece la fuente para la cabecera */
}					

/* ------------------------------------------------------------------------------------------- */					
.section { 				/* Estilo para controlar la visualización de secciones específicas */
    display: none; 			/* Oculta todas las secciones por defecto */
}							
.active {				/* Estilo para controlar la visualización de secciones específicas */
    display: block; 			/* Muestra la sección que tiene la clase 'active' */
}					

/* ------------------------------------------------------------------------------------------- */

.main-content {				/* Estilos para el contenido principal con diseño de columnas */
    display: flex;			/* Utiliza Flexbox para el diseño de la página */
    justify-content: space-between; 	/* Distribuye el espacio entre las columnas */
}					

/* ------------------------------------------------------------------------------------------- */

.left-column, .right-column {		/* Estilos para las columnas laterales */
    width: 260px; 			/* Ancho de las columnas laterales */
    padding: 4px; 			/* Espaciado interno para el contenido de las columnas */
    border-right: 1px solid #000000; 	/* Línea separadora para la columna izquierda */
}					

/* ------------------------------------------------------------------------------------------- */

.right-column {				/* Estilos específicos para la columna derecha */
    border-right: none; 		/* Removemos la línea de la derecha en la columna derecha */
    border-left: 1px solid #000000; 	/* Línea separadora para la columna derecha */
}	

/* ------------------------------------------------------------------------------------------- */				
.center-content {			/* Estilos para el contenido central */
    width: 1000px; 			/* Ancho del contenido central */
    padding: 10px; 			/* Espaciado interno para el contenido central */
}

/* ------------------------------------------------------------------------------------------- */

.menu {					/* Estilos para el menú de navegación */
    list-style-type: none;  		/* Elimina los estilos de lista por defecto (puntos, números, etc.) */
    padding: 0;  			/* Elimina el relleno por defecto de la lista */
}					

				

/* ------------------------------------------------------------------------------------------- */

.calendar-cell {
    border-radius: 6px; /* redondeado de las esquinas del calendario */
}

td[class*='table'] {
	font-size: 16px;	
	width: 0px;
	height: 0px;
	border-radius: 10%;
}

td[class*='tabla'] {
	font-size: 16px;	
	width: 0px;
	height: 0px;
	border-radius: 100%;
}

td[class*='p'] {
	font-size: 10px;	
	width: 14px;
    height: 0px;
 }
td[class*='q'] {
	font-size: 20px;	
	width: 0px;
    height: 0px;
 }

td[class*='aa'] {
	font-size: 16px;	
	width: 0px;
    height: 0px;
    border-radius: 100%;
	background:#C0D9D9;
	border: 1px black solid;
}

/* ------------------------------------------------------------------------------------------- */

/* Menú vertical con subpestañas
----------------------------------------------- */
#menuvertical {
text-align: center;
width:100%;
}
#menuvertical ul { list-style-type: none; padding:0;}
#menuvertical ul li.nivel1 {
width: 142px; /* Ancho de las pestañas */
}
#menuvertical ul li.primera {
border-top: solid 0px #FFF; /* Borde superior de la primera pestaña */
}
#menuvertical ul li {padding:0;}
#menuvertical ul li a {
display: block;
text-decoration: none;
color: #000000; /* Color del texto */
background-color: #ccb666; /* Color de fondo */
border: solid 1px #fff; /* Borde de las pestañas */
border-top: none;
border-radius: 6px;

padding: 15px;
position: relative;
}
#menuvertical ul li:hover {
position: relative;
color: #000; /* Color del texto al pasar el mouse */
}
#menuvertical ul li a:hover, #menuvertical ul li:hover a.nivel1 {
background-color: #6f6f6f; /* Color de fondo al pasar el mouse */
color: #fff;
position: relative;
}
#menuvertical ul li a.nivel1 {
display: block !important;
display: none;
position: relative;
}
#menuvertical ul li ul {
display: none;
}
#menuvertical ul li a:hover ul, #menuvertical ul li:hover ul {
display: block;
position: absolute;
left: 204px;
top: 0px;
}
#menuvertical ul li ul li a {
width: 140px;
background-color: #ccb666; /* Color de fondo subpestañas */
color: #000000; /* Color del texto subpestañas */
}
#menuvertical ul li ul li a:hover {
position: relative;
background-color: #6f6f6f; /* Color de fondo al pasar el mouse subpestañas */
color: #fff; /* Color del texto al pasar el mouse subpestañas */
}